<template>
	<div class="more-detail">
		<ul class="pl30rem pr30rem"
			v-infinite-scroll="loadData" 
			infinite-scroll-disabled="loading" 
			infinite-scroll-distance="10"
			v-if="flag">
			<!-- booking_type 1体验 2预购 3在售 4活动商品 -->
			<li class="border-b pt30rem pb30rem" v-for="item in data">
				<template v-if="item.booking_type==1">
					<router-link  :to="'/detail/experience-detail/' + item.goods_id + '?status=2'+'&ty=true'" class="layout">
						<img class="mr10rem" :src="img_url + item.pic_cover_mid" alt="">
						<div class="flex_1 mr20rem">
							<p class="fs28rem bold black mb10rem ellipsis-more">{{ item.goods_name }}</p>
							<p class="mb30rem c999">{{ item.ty_starttime * 1000,'MM月dd号hh' | formatDate }}点开抢</p>
							<div style="width:8rem;">
								<countdown :data="item.count_down" :type="countdownType"></countdown>
							</div>	
						</div>
						<i class="iconfont icon-right2"></i>
					</router-link>
				</template>
				<template v-if="item.booking_type=='2'">
					<router-link :to="'/detail/experience-detail/' + item.goods_id" class="layout">
						<img class="mr10rem" :src="img_url + item.pic_cover_mid" alt="">
						<div class="flex_1 mr20rem">
							<p class="fs28rem bold black mb10rem ellipsis-more">{{ item.goods_name }}</p>
							<p class="mb30rem c999">{{ item.booking_starttime * 1000,'MM月dd号hh' | formatDate }}点开抢</p>
							<div style="width:8rem;">
								<countdown :data="item.count_down" :type="countdownType"></countdown>
							</div>	
						</div>
						<i class="iconfont icon-right2"></i>
					</router-link>
				</template>
			</li>
		</ul>
		<template v-else>
			<default :imgUrl="img" explain='暂无商品信息'></default>
		</template>	
	</div>
</template>

<script>
	import { beAboutTo } from "@/api/goods-detail";
	import Countdown from "@/components/Countdown";
	import Default from "@/components/Default";
	import { InfiniteScroll } from 'mint-ui';
	import { formatDate } from '@/utils'
	import $toast 		from '@/utils/toast';
	export default{
		components: {
			Countdown,
			Default
		},
		directives:{
			InfiniteScroll
		},
		filters: {
			formatDate(time,fmt){
				let date = new Date(time);
				return formatDate(date,fmt)
			}
	  	},
		data()
		{
			return{
				flag          : true,
				loading       : false,
				countdownType : true,
				type          : this.$route.params.type,
				page_index    : 1,
				data          : [],
				img_url       : process.env.IMG_URL,
				img           : require('../../../assets/icon-goods2.png')
			}
		},
		methods:
		{
			loadData()
			{
				this.loading = true;
				var params = {
					type       : this.type,
					page_index : this.page_index++,
					page_size  : 10
				}
				beAboutTo(params).then( res => {
					if(res.data.length > 0 )
					{
						this.data = this.data.concat(res.data);
						this.loading = false;
					}
					else if (params.page_index > 1)
					{
						$toast('没有更多了');
					}
					else
					{
						this.flag = false;
					}
					if(res.data.length < params.page_size)
					{
						this.loading = true;
					}
				})
			}
		}
	}
</script>

<style lang="less">
	.more-detail{
		ul{
			li{
				img{
					width: 200/28rem;
					height: 200/28rem;
					object-fit: cover;
				}
			}
		}
		.count-down{
			color: #fff;
			strong{
				i{
					background-color: #000;
				}
			}
			span{
				background-color: #000;
			}
		}
	}
</style>
